<html>
<head>
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.drawing.yaxis.js" ></script>
    <script src="../libraries/RGraph.drawing.xaxis.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A quarter axis Line chart</title>
    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A demonstration of how you can combine the Line chart and drawing axis objects to produce a chart with an offset X axis" />
     
</head>
<body>

    <h1>A quarter axis Line chart</h1>
    
    <p>
        A Line chart (or Bar or Scatter) which has the X aaxis part way up the scale (instead of the center) is not supported by
        default. But by using the X/Y axis drawing API objects you can achieve the same effect. The method is quite involved however
        and not straightforward. It involves two Y axis objects - the upper and the lower axes, an X axis object and a Line chart
        with chart.outofbounds set to true (and the background grid and axes disabled). The background grid here is manually drawn
    </p>
    
    <p>
    `   As this demo is a lot of code - you might find it easier to "build your page around the chart" instead of trying to incorporate
        the chart into your page.
    </p>
    
    <p style="padding: 3px; border: 1px solid gray; background-color: #eee; border-radius: 5px">
        <b>Note:</b>
        This demo differs from <a href="line-quarter-axis.html">the other quarter axis demo</a> in that the upper and lower halves
        are coloured differently - in this case in order to show positive and negative temperatures.        
    </p>

    <canvas id="cvs" width="600" height="350">[No canvas support]</canvas>

    <script>
        $(document).ready(function ()
        {
            var data = [19,13,5,-4,-6,-1,3];
            var context = document.getElementById("cvs").getContext('2d');
            
            // Draw the background grid
            context.strokeStyle = '#eee';
            for (var i=25; i<=575; i+=25) context.strokeRect(i + 0.5, 25, 0, 300);
            for (var i=25; i<=325; i+=25) context.strokeRect(25, i + 0.5, 550, 0);



            // Draw the top Y axis
            var top_yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 25,
                options: {
                    max: 25,
                    numticks: 4,
                    numlabels: 4,
                    gutter: {
                        top: 25,
                        bottom: 125
                    }
                }
            }).draw()

            // draw the bottom Y axis
            var bottom_yaxis = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 25,
                options: {
                    max: 10,
                    gutter: {
                        top: 225,
                        bottom: 25
                    },
                    scale: {
                        invert: true
                    },
                    numlabels: 2,
                    numticks: 2,
                    noendtick: {
                        top: true
                    },
                    scale: {
                        invert: true,
                        zerostart: false
                    },
                    units: {
                        pre: '-'
                    }
                }
            }).draw()
            
            // draw the X axis
            var xaxis = new RGraph.Drawing.XAxis({
                id: 'cvs',
                y: 225,
                options: {
                    xaxispos: 'center',
                    labels: {
                        self: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                        position: 'edge'
                    },
                    numticks: 0,
                    hmargin: 25,
                    text: {
                        color: '#666'
                    }
                }
            }).draw()




            // Clip the chart so that only the top part of the red line is drawn to the screen. Any reference to the context
            // can be used here.
            xaxis.context.save();
                xaxis.context.rect(0,0,600,225);
                xaxis.context.clip();
            
            
                // Draw the line chart
                var line = new RGraph.Line({
                    id: 'cvs',
                    data: data,
                    options: {
                        hmargin: 25,
                        gutter: {
                            bottom: 125
                        },
                        outofbounds: true,
                        shadow: true,
                        linewidth: 5,
                        background: {
                            grid: false
                        },
                        ylabels: false,
                        noaxes: true,
                        fillstyle: 'rgba(255,0,0,0.3)',
                        ymax: 20
                    }
                }).draw()
            
            // This gets rid of the clip() effect
            xaxis.context.restore();




            // Clip the chart so that only the bottom part of the blue line is drawn to the screen. Any reference to the context
            // can be used here.
            xaxis.context.save();
                xaxis.context.rect(0,225,600,125);
                xaxis.context.clip();
            
            
                // Draw the line chart
                var line = new RGraph.Line({
                    id: 'cvs',
                    data: data,
                    options: {
                        hmargin: 25,
                        gutter: {
                            bottom: 125
                        },
                        outofbounds: true,
                        shadow: true,
                        linewidth: 5,
                        ylabels: false,
                        noaxes: true,
                        background: {
                            grid: false
                        },
                        fillstyle: 'rgba(255,0,0,0.3)',
                        ymax: 20,
                        colors: ['blue']
                    }
                }).draw()
            
            // This gets rid of the clip() effect
            xaxis.context.restore();
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>

